import React from "react";
import { Layout } from "antd";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
// 引入 动作创建函数
import { setCollapsed } from "@/store/modules/app";
import BasicBreadcrumb from "./BasicBreadcrumb";

const BasicLayoutHeader = () => {
  const collapsed = useAppSelector((state) => state.app.collapsed);
  // 直接引入 RootState 这个类型，然后标注也可以正确的使用
  // useSelector((state: RootState) => state.app.collapsed)
  const dispatch = useAppDispatch();

  return (
    <Layout.Header
      className="site-layout-background"
      style={{ padding: 0, display: "flex", alignItems: "center" }}
    >
      {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
        className: "trigger",
        onClick: () => dispatch(setCollapsed(!collapsed)),
      })}

      <BasicBreadcrumb />
    </Layout.Header>
  );
};

export default BasicLayoutHeader;
